<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购买页</title>
		<link rel="stylesheet" href="css/gmy.css" />
		<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.hiden_div{
			width: 10.533333rem;
			height: 13.333333rem;
			background-color:rgba(255,255,255,0.5);
			opacity: 0;
			/*background-color:red;*/
			position: fixed;
			top: 15%;
			display: none;
		}
	</style>
	<body>
		<div class="box">
			<div id="header">
				<div id="header_one">
					<a href="new_file.html" style="color: #fff; text-decoration:none;">
						<img style="margin-top: 10%;width: 0.666666rem;" src="img/allj.png" />
					</a>
				</div>
				<div id="header_two">
					<span>本课视频</span>
				</div>
				<a href="new_file.html">
				<div id="header_three">
					<img src="img/fangzhi.png" />
				</div>
				</a>
			</div>
			<div class="video">
				<video class="videos" src=""> </video>
			</div>

			<ul class="stus">
				<li class="tiao1"><span>课程选集</span></li>
				<li class="tiao2"><a style="color:black;text-decoration: none;" href="xitiye.html"><span>本课习题</span></a></li>
			</ul>
			<ul class="cat">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				
			</ul>
			<!--<div class="tiao"></div>-->
			<!--<ul>
			<li></li>
		</ul>-->
			<ul class="list">
				<li class="aa">
					<span>&nbsp;视频选集</span>
				</li>
				<div>
					<li class="li li1 allli">&nbsp;&nbsp;1.一个好的HR应该做什么事情<i>266分钟</i></li>
					<li class="li li2 allli">&nbsp;&nbsp;2.HR如何找人选人<i>266分钟</i></li>
					<li class="li li3 allli">&nbsp;&nbsp;3.HR应该开掉什么人<i>266分钟</i></li>
					<li class="li li4 allli">&nbsp;&nbsp;4.问答环节<i>266分钟</i></li>
				</div>
			</ul>
			<!--<ul class="list1">
				<li>
					<h class="font">本课习题</h>
				</li>

			</ul>-->
			<div class="mm">
				<div class="m">
					<p style="color: red;font-size: 0.493333rem;">￥ 98</p>
					<p style="font-size: 0.36rem;color: gray;">包含本课程所有视频及习题</p>
				</div>
				<div class="onclick"><div class="bb">开始学习</div></div>

			</div>
			<div class="hiden_div" >
				
			</div>
			<div class="hiden">购买后才能观看</div>
		</div>
	</body>
    <script type="text/javascript">
    	$(".cat li").click(function() {
				$(this).css('color', '#34a0fe');
				$(this).siblings().css('color', 'black');
				var i = $(this).index() + 1;
				$(".list li:eq(" + i + ")").css('color', '#34a0fe');
				$(".list li:eq(" + i + ")").siblings().css('color', 'black');
			});
			$(".stus li").click(function() {
				$(this).css('color', '#34a0fe', 'border-bottom', '1px solid none');
				//	$(this).css('border-bottom','1px solid none');
				$(this).siblings().css('color', 'black');
				// 	$(this).siblings().css('border-bottom','1px solid #34a0fe');
			});

			$(".stus li:eq(0)").click(function() {
				$('.list1').css('display', 'none');
				$('.list').css('display', 'block');

			});
			
				$(".li1").click(function(){
					$(".hiden_div").css("display", "block");
					$(".hiden").css("display", "block");

				});
				
				$(".hiden_div").click(function(){
					$(".hiden_div").css("display", "none");
					$(".hiden").css("display", "none");

				});
				$(".allli").each(function(){
					$(this).click(function(){
					$(".hiden_div").css("display", "block");
					$(".hiden").css("display", "block");
				

				
				});
				})
				
			
//			$(".stus li:eq(1)").click(function() {
//				$('.list1').css('display', 'block');
//				$('.list').css('display', 'none');
//			});
    </script>
</html>